<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
</head>
<style>
* {
	/* margin: 0;
	padding: 0; */
	color: #fff;
}

body {
	background: black;
}

#id {
	background: #f00;
}

.class {
	background: turquoise;
}

ul li a {
	color: #f00;
}

div > span {
	color: #f00;
}

h1 + p {
	background: #f00;
}

h2 ~ p {
	color: #f00;
}

a[href="#"] {
	color: #f00;
}

a[target^="_b"] {
	color: blue;
}

a[title$="3"] {
	color: green;
}

table tr:nth-child(odd) > td {
	color: #f00;
}

table tr:nth-child(even) > td {
	color: blue;
}


.a:hover {
	background: blue;
}

</style>

<body>
    行内样式 > 内联样式 > 外联样式
    <img src="../media/quan.jpg" alt="">
    <div id="id">id选择器</div>
    <div class="class">类选择器</div>
    <ul>
        <li>
            li
            <a href="">后代选择器</a>
        </li>
    </ul>
    <div>
        子选择器：选择div后面的span
        <p>p标签</p>
        <span>span标签</span>
    </div>
    <h1>h1标签</h1>
    <p>p标签1</p>
    <p>p标签2</p>
    <h2>h2标签</h2>
    <p>p标签1</p>
    <p>p标签2</p>
    <a href="#">属性选择器1</a>
    <a href="" target="_blank">属性选择器2</a>
    <a href="" target="" title="属性选择器3">属性选择器3</a>
    <table>
        <caption>伪类选择器</caption>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>2</td>
            <td>2</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>4</td>
            <td>4</td>
            <td>4</td>
        </tr>
        <tr>
            <td>5</td>
            <td>5</td>
            <td>5</td>
            <td>5</td>
        </tr>
        <tr>
            <td>6</td>
            <td>6</td>
            <td>6</td>
            <td>6</td>
        </tr>
    </table>
    <a class="a">伪类选择器</a>
</body>

</html>